<template>
    <div class="login">
        <!-- 顶部导航 -->
        <van-nav-bar title="登录"></van-nav-bar>

        <!-- banner 图 -->
        <div class="header"></div>

        <!-- 手机号输入框 -->
        <van-field
            v-model="mobile"
            center
            clearable
            placeholder="请输入您的手机号"
        >
            <template #button>
                <van-button size="small" type="primary" @click="getCode">{{
                    codeButtonText
                }}</van-button>
            </template>
        </van-field>

        <!-- 验证码输入框 -->
        <van-field v-model="code" placeholder="请输入验证码"></van-field>

        <!-- 确定 -->
        <van-button type="primary" block round @click="login">确定</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            codeButtonText: "发送验证码",
            mobile: "",
            code: "",
            disable: false,
        };
    },
    methods: {
        async getCode() {
            if (!this.mobile || !/^1[3589]\d{9}$/.test(this.mobile)) {
                this.$toast({
                    type: "fail",
                    message: "手机号不合法",
                });
                return;
            }

            if (this.disable) {
                return;
            }

            this.disable = true;

            let second = 60;
            let intervalId = setInterval(() => {
                if (second > 0) {
                    second--;
                    this.codeButtonText = `重新发送(${second})`;
                } else {
                    clearInterval(intervalId);
                    this.codeButtonText = "获取验证码";
                    this.disable = false;
                }
            }, 1000);

            // 发请求，获取验证码
            const res = await this.$http.get(`/code`, {
                params: { mobile: this.mobile },
            });
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            this.$toast({
                type: "success",
                message: res.message,
            });
        },
        async login() {
            const { mobile, code } = this;
            if (!mobile || !code) {
                this.$toast({
                    type: "fail",
                    message: "手机号或验证码不能为空",
                });
                return;
            }
            const res = await this.$http.post("/login", { mobile, code });
            if (res.code !== 200) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 存储用户登录状态
            window.sessionStorage.setItem("token", res.data.token);
            window.sessionStorage.setItem(
                "user",
                JSON.stringify(res.data.user)
            );
            // 跳转到我的页面
            this.$router.push("/admin/my");
        },
    },
};
</script>

<style lang="less">
.login {
    .header {
        height: 120px;
        background-color: #e69152;
    }
}
</style>
